<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item v-for="item in breadcrumbData" :key="'breadcrumb_' + item.path">
        {{ item.meta.title }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'

export default {

//setup 中接收route
  setup(){
    const route = useRoute();
    // 生成数组数据
    const breadcrumbData = ref([]);
    const getBreadcrumbData = () => {
          breadcrumbData.value = route.matched.filter(
              item =>{
                console.log(item)
                return item.meta && item.meta.title
              }
          )
        };
    // 监听路由变化时触发
    watch(
        route,
        () => {
          getBreadcrumbData()
        },
        {
          immediate: true
        }
    );
    // 处理点击事件
    const router = useRouter();
    const onLinkClick = item => {
      console.log(item)
      router.push(item.path)
    };
    return{
      breadcrumbData
    }
  }
};
</script>